<!--
 *                        .::::.
 *                      .::::::::.
 *                     :::::::::::
 *                  ..:::::::::::'
 *               '::::::::::::'
 *                 .::::::::::
 *            '::::::::::::::..
 *                 ..::::::::::::.
 *               ``::::::::::::::::
 *                ::::``:::::::::'        .:::.
 *               ::::'   ':::::'       .::::::::.
 *             .::::'      ::::     .:::::::'::::.
 *            .:::'       :::::  .:::::::::' ':::::.
 *           .::'        :::::.:::::::::'      ':::::.
 *          .::'         ::::::::::::::'         ``::::.
 *      ...:::           ::::::::::::'              ``::.
 *     ````':.          ':::::::::'                  ::::..
 *                        '.:::::'                    ':'````..
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-02-25 12:08:27
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-04-05 17:44:45
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->

<template>
  <el-card class="container" shadow="never">
    <div slot="header" class="header">
      <div class="title">
        最新通知
        <svg-icon icon-class="notice" class="icon" />
      </div>
      <el-link :underline="false" type="primary" href="/#/account/notice">
        查看全部
      </el-link>
    </div>
    <div v-loading="loading">
      <div v-for="news in list" :key="news.id" class="news-item">
        <div class="title">
          <span>{{ news.title }}</span>
          <span>{{ news.utime }}</span>
        </div>
        {{ news.content }}
      </div>
    </div>
  </el-card>
</template>
<script>
import { GetMsg } from '@/api/home'
export default {
  data() {
    return {
      loading: false,
      list: []
    }
  },
  async created() {
    this.loading = true
    const { code, data } = await GetMsg()
    this.loading = false
    if (+code === 1) {
      this.list = data && data.list ? data.list : []
    }
  }
}
</script>
<style lang="scss" scoped>
.news-item {
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid#e6ebf5;
  line-height: 1.5715;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  word-break: break-all;
  &:first-child {
    margin-top: 0;
  }
  &:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border: none;
  }
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    color: rgba(0, 0, 0, 0.85);
  }
}
</style>
